<style>
    ::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 0px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 0px;
        display: none;
    }

    ::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 0px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
        background: #3d9eff;
    }

    ::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.2);
        background: #ededed;
    }

    body {
        margin-top: 0px;
    }

    .user-info-box {
        overflow: hidden;
    }

    .user-info {
        position: absolute;
        left: 130px;
        top: 0px;
        /* height: 100%; */
        padding: 10px;
    }

    .user-info strong {
        display: inline-block;
        margin-top: 3px;
    }

    .user-icon {
        width: 120px;
        height: 160px;
        border-radius: 5%;

    }

    .user-icon>img {
        /* object-fit: cover; */
        padding-top: 5px;
        margin-top: 4px;
        border-radius: 5%;
        object-fit: contain;
        /* border: 5px solid #ccc; */
    }

    .user-info-list {
        margin: 0px;
        padding: 5px 3px;
        list-style-type: none;
    }

    .user-info-iten {
        margin: 3px 0px;
    }

    .fa-yuan {
        width: 10px;
        height: 10px;
        display: inline-block;
        background: #3d9eff;
        text-align: center;
        border-radius: 30%;
    }

    .user-info span {
        font-size: 14px;
    }

    .user-info-qm {
        position: absolute;
        top: 168px;
        left: 8px;
        width: 270px;
        height: 60px;
        word-wrap: break-word;
        /* background: #000; */
        border: 1px solid #ccc;
        /* box-shadow: 1px 1px 50px rgba(0, 0, 0, .3); */
    }

    .user-info-qm span {
        font-size: 14px;
        word-wrap: break-word;
    }

    .user-info-iten-qm {
        margin: 0px;
    }

    .user-butt {
        position: absolute;
        right: 8px;
        top: 172px;
        width: 43px;
    }

    .user-butt button {
        margin-bottom: 8px;
    }

    .pu {
        object-fit: contain;
    }

    .xu {
        background: rgba(0, 0, 0, .2);
    }

    .yc {
        width: 120px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        float: right;
        padding-top: 2px;
        padding-left: 3px;
    }

</style>
@if(isset($data))

<div class="user-info-box">
    {{-- 头像 --}}
    <div class="user-icon">
        <img alt="image" class="img-circle" src="{{$data->icon}}" width="100%" height="100%">
    </div>
    {{-- 信息 --}}
    <div class="user-info">
        <strong>用户信息</strong>
        <ul class="user-info-list" id="user-info-list">
            <li class="user-info-iten" onmouseover="hdinfo(this)" onmouseout="hdinfo2()">
                <i class=" fa-yuan"></i>
                <span> 账号:</span> <span class="yc">{{$data->user_name}}</span>
            </li>
            <li class="user-info-iten" onmouseover="hdinfo(this)" onmouseout="hdinfo2()">
                <i class="fa-yuan"></i>
                <span> 昵称: </span> <span class="yc">{{$data->nickname}}</span>
            </li>
            <li class="user-info-iten" onmouseover="hdinfo(this)" onmouseout="hdinfo2()">
                <i class="fa-yuan"></i>
                <span>邮箱: </span> <span class="yc">{{$data->email}}</span>
            </li>
            <li class="user-info-iten" onmouseover="hdinfo(this)" onmouseout="hdinfo2()">
                <i class="fa-yuan"></i>
                <span> 等级: </span> <span class="yc">lv{{$data->lv}}</span>
            </li>
            <li class="user-info-iten" onmouseover="hdinfo(this)" onmouseout="hdinfo2()">
                <i class="fa-yuan"></i>
                <span> 积分: </span> <span class="yc">{{$data->integral}}</span>
            </li>
        </ul>
    </div>
    {{-- 签名 --}}
    <div class="user-info-qm">
        <strong>个性签名</strong>
        <ul class="user-info-list" style="padding-top: 0px;">
            <li class="user-info-iten-qm">
                <span>{{$data->art}}</span>
            </li>

        </ul>
    </div>
    {{-- 按钮 --}}
    <div class="user-butt">
        <button onclick="lahei(this)" class="@if($info['hmd'])xu @endif">拉黑</button>
        <button onclick="jinyan(this)" class="@if($info['jy'])xu @endif">禁言</button>
    </div>
</div>

<script type="text/javascript" src="/assets/home/js/jquery-3.4.1.min.js"></script>
<script src="/assets/layer/layer.js"></script>
<script>
    var room = "{{$info['room']}}";
    var name = "{{$info['name']}}";
    var tips;

</script>
<script type="text/javascript" src="/assets/home/js/operation/getinfo.js"></script>

@else
<img class="pu" src="/assets/home/img/pay.png" width="100%" height="100%">
@endif
